<template>
  <div class="userList">
    <!-- 管理员用户信息 -->
    <el-descriptions
      class="margin-top"
      title="当前管理员信息"
      :column="3"
      :size="size"
      border
    >
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ usertext.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          年龄
        </template>
        {{ usertext.age }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          手机号
        </template>
        {{ usertext.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          姓名
        </template>
        <el-tag size="small">实名验证</el-tag>
        {{ usertext.relname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          职位
        </template>
        {{ usertext.position }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 所有用户信息 -->
    <div class="userlist">
      <h4>所有买家用户信息</h4>

      <el-table
        height="250"
        :data="userdata"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.Username }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.Username }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="密码" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Password }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p>
        <el-button type="danger" plain @click="handleDelete()"
          >批量删除</el-button
        >
      </p>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="1"
        layout="total,  prev, pager, next, jumper"
        :total="res.total"
        :page-size="5"
        background
      >
      </el-pagination>
      <!-- 弹窗 -->
      <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

      <el-dialog
        title="修改用户信息"
        :visible.sync="dialogFormVisible"
        @close="clear"
      >
        <el-form :model="form" ref="form">
          <p>当前修改用户为：{{ onlyUser.Username }}</p>
          <el-form-item label="新用户名" label-width="100px">
            <el-input v-model="form.newusername" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="100px">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submityes()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 所有管理员信息 -->
  </div>
</template>
<script>
export default {
  name: "UserList",
  data() {
    return {
      usertext: {}, //当前管理员用户信息
      size: "",
      userdata: [], //所有用户信息
      multipleSelection: [], //单选的用户信息
      onlyUser: "", //点击编辑获取当前点击的信息
      res: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      page: "",
      form: {
        //编辑弹窗的信息
        newusername: "",
        password: "",
      },
      selectUsername: [],
    };
  },
  created() {
    const username = this.$store.state.user.userInfo.username;
    this.$request
      .get("/manageuser", {
        params: { username: username },
      })
      .then(({ data }) => {
        this.usertext = data.data[0];
      });
    this.getUserData(1);
  },
  // computed: {
  //   dialogFormVisible: function () {
  //     return this.onlyUser = "";
  //   },
  // },
  methods: {
    //获取用户信息
    getUserData(page) {
      this.$request
        .get("/user", {
          params: {
            limit: 5,
            page: page,
          },
        })
        .then(({ data }) => {
          this.userdata = data.data;
          this.res = data;
        });
    },
    //删除用户
    handleDelete(e) {
      if (this.multipleSelection == 0) {
        this.selectUsername.push(e.Username);
      } else {
        this.multipleSelection.forEach((item) => {
          this.selectUsername.push(item.Username);
        });
      }
      this.$confirm("此操作将直接删除该用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await this.$request.post("/delUser", {
            username: this.selectUsername,
          });
          if (data.status == 200) {
            this.selectUsername = [];
            this.getUserData(this.page);
          }

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //单选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //切换页码
    handleCurrentChange(val) {
      this.getUserData(val);
      this.page = val;
    },
    //点击编辑 获取当前点击的用户信息
    edit(e) {
      this.dialogFormVisible = true;
      this.onlyUser = e;
    },
    //修改用户信息
    submityes() {
      this.$confirm("此操作将直接修改用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$request
            .post("/updateUser", {
              username: this.onlyUser.Username,
              newusername: this.form.newusername,
              password: this.form.password,
            })
            .then(({ data }) => {
              this.dialogFormVisible = false;

              this.getUserData(this.page);
            });

          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.onlyUser = "";
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    clear() {
      this.form = {
        newusername: "",
        password: "",
      };
      this.onlyUser = "";
    },
  },
};
</script>
<style scoped>
.el-pagination {
  margin-left: 20vh;
}
.el-table {
  height: 40vh;
}
.userList {
  padding: 20px;
}
</style>
